<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>开心记账本</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <script src="../js/jquery.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script src="../js/vue.js"></script>
    <script src="../js/axios.min.js"></script>
    <style>
        .go-home {
            position: fixed;
            bottom: 5%;
            right: 1%;
            z-index: 888;
            border-radius: 40px;
            opacity: 0.9;
        }

    </style>
</head>
<body>

<div id="app">
    <!-- 头部 -->
    <div class="container">
        <div class="row" style="background-color: #ffda44;height: 150px;padding: 43px 0;">
            <div class="col-sm-4" style="text-align: center;padding-top: 10px;">
                <div style="font-size: 2.3em;">
                    2022年
                </div>
            </div>

            <div class="col-sm-4" style="text-align: center;">
                <div style="font-size: 1.3em;">
                    收入
                </div>
                <div style="font-size: 2.2em;">
                    {{totalShouru}}元
                </div>
            </div>

            <div class="col-sm-4" style="text-align: center;">
                <div style="font-size: 1.3em;">
                    支出
                </div>
                <div style="font-size: 2.2em;">
                    {{totalZhichu}}元
                </div>
            </div>
        </div>
    </div>

    <br/>
    <!-- 内容 -->
    <div class="container">

        <!-- 时间 -->
        <div v-for="(value, key) in accountDataList" :key="key">
            <br/>
            <div class="row" style="background-color: #ffffff;font-size: 1.5em;color: #a3a3a3;">
                <div class="col-sm-5">
                    <span>{{key}}</span>
                </div>
            </div>
            <div v-for="(value, key2) in value" :key="key2" class="row"
                 style="background-color: ffffff;font-size: 1.5em;margin-top: 15px;">
                <div class="col-sm-5">
                    <span v-if="value.account_type == 2">
                        <img src="../image/zhichu2.png" style="width:60px;height: 60px;"/>
                    </span>
                    <span v-else="value.account_type == 1">
                        <img src="../image/shouru.png" style="width:60px;height: 60px;"/>
                    </span>
                    <span style="font-size: 1.3em;padding-left: 20px;">{{value.account_desc}}</span>
                </div>
                <div class="col-sm-7" style="text-align: right;">
                    <span v-if="value.account_type == 2">
                        <span style="font-size: 2em;">-{{value.account_num}}</span>
                    </span>
                    <span v-else="value.account_type == 1">
                        <span style="font-size: 2em;">{{value.account_num}}</span>
                    </span>
                </div>
                <br/>
            </div>
        </div>
        <hr>
    </div>

    <!-- 模态框（Modal） -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title" id="myModalLabel">
                        添加记账
                    </h4>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <label for="name">账目类型</label>
                            <select class="form-control" id="accountType" v-model="formData.account_type">
                                <option value="2">支出</option>
                                <option value="1">收入</option>
                            </select>
                        </div>

                        <div class="form-group">
                            <label for="name">金额</label>
                            <input v-model="formData.account_num" type="text" id="accountNum" maxlength="11"
                                   placeholder="请输入金额" class="form-control quantity-count"/>
                        </div>

                        <div class="form-group">
                            <label>描述</label>
                            <input type="text" v-model="formData.account_desc" id="accountDesc" maxlength="15"
                                   placeholder="请输入描述" class="form-control quantity-count"/>
                        </div>
                        <button type="button" class="btn btn-primary" @click="submitData()">提交</button>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                    </button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

</div>

<view class="go-home">
    <img src="../image/add.png" style="width: 120px;height: 120px;" data-toggle="modal" data-target="#myModal"/>
</view>


<script>
    new Vue({
        el: '#app',
        data: {
            accountDataList: [],
            totalShouru: '500',
            totalZhichu: '500',
            formData: {
                account_type: '',
                account_num: '',
                account_desc: ''
            }
        },
        methods: {
            //提交数据到后台
            submitData() {
                console.log(this.formData);
                axios.post("/save", this.formData).then(response => {
                    $('#myModal').modal('hide');//隐藏弹出框
                    this.getAccountList();
                    alert(response.data.message);
                }).catch(function (error) { // 请求失败处理
                    console.log(error);
                    fail_prompt("请求发生异常", 5000);
                });
            },
            //向后台发送请求，获取用户所有记账记录
            getAccountList() {
                axios.get("/list", '').then(response => {
                    console.log('后台有响应数据来了');
                    console.log(response);
                    var data = response.data;
                    this.totalShouru = data.totalShouru;
                    this.totalZhichu = data.totalZhichu;
                    this.accountDataList = data.userAccountList;
                }).catch(function (error) { // 请求失败处理
                    console.log(error);
                });
            }
        },
        //钩子函数
        mounted() {
            console.log('钩子函数执行了')
            this.getAccountList();
        }
    });
</script>

</body>
</html>
